<template>
	<view id="proxy-apply">
		<header-back :headerTitle="$lang('apply.title')"></header-back>
		
		<view class="apply-form">
			<view class="apply-row">
				<view class="h6">{{ $lang('apply.nationality') }}</view>
				<view class="row-in row-arrow" @click="openPopup(2,selectObj.tel?selectObj.tel:'')">
					<view class="code-name">{{selectObj.name? selectObj.name: $lang('apply.nationality') }}</view>
					<image src="/static/icon/right_arrow_icon_01.png" class="arrow-r" mode=""></image>
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('apply.phoneNumber') }}</view>
				<view class="row-in">
					<view class="code" @click="openPopup(1,formObj.aagent_mobile_code)">
						<view class="code-name">+ {{formObj.aagent_mobile_code}}</view>
						<image src="/static/icon/icon_down_01.png" class="down-icon" mode=""></image>
					</view>
					<input  type="number" @input="handleState()" v-model="formObj.aagent_mobile" :placeholder="$lang('apply.iphoneNumber') " placeholder-style="color:#BBC0CB;" />
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('apply.eMail') }}</view>
				<view class="row-in row-in-border">
					<input  type="text" @input="handleState()" v-model="formObj.aagent_email" :placeholder="$lang('apply.ieMail') " placeholder-style="color:#BBC0CB;" />
				</view>
			</view>
			<view class="no-margin"></view>
			<view class="apply-row">
				<!-- <view class="h6">合伙人</view> -->
				<view class="apply-item">
					<view v-for="(obj,i) in filterArr " :key="i" :class="['item',itemIndex == i?'act':'']" @click="setItem(obj,i)">{{obj.type}}</view>
				</view>
				<view class="row-in row-arrow" @click="$refs.unionPopup.open()">
					<view class="code-name">{{unionObj.level_name}}</view>
					<image src="/static/icon/right_arrow_icon_01.png" class="arrow-r" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="content-footer">
			<view class="footer-name">
				<view class="h6">{{unionObj.level_name}}</view>
				<view class="h8">{{unionObj.price}} USDT</view>
			</view>
			<view :class="['btn',disabled ? '':'btn-act'] " @click="submitFn()">{{ $lang('apply.becomeAnAgent') }}</view>
		</view>
		
		
		<!-- 选择合伙人 -->
		<uni-popup ref="unionPopup" type="center" :mask-click="true">
			<view class="tran-popup">
				<view class="popup-top">
					<image @click.stop="$refs.unionPopup.close()" src="/static/icon/right_arrow_03.png" class="arrow-icon" mode=""></image>
					<view class="popup-title">{{ $lang('apply.choosingAPartner') }}</view>
					<view class="right"></view>
				</view>
				<view class="popup-ul">
					<view class="popup-li" v-for="(fil,j) in filterAry" :key="fil.id" @click="getTime(fil,j)">
						<view>{{fil.level_name}}</view>
						<image v-show="filIndex == fil.id" src="/static/icon/icon_select_01.png" class="radio-icon" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 选择国家 -->
		<uni-popup ref="countryPopup" type="right" :mask-click="true">
			<view class="country-popup">
				<view class="shops-header-box">
					<view class="shops-header">
						<view class="shops-left" @click.stop="$refs.countryPopup.close()">
							<image  src="/static/icon/arrow_left_01.png" class="arrow-l" mode=""></image>
							<view class="shops-header-title">{{showType == 1? $lang('apply.chooseAnAreaCode') : $lang('apply.chooseACountry')}}</view>
						</view>
						<view class="shops-right" ></view>				
					</view>
					<view class="search-wrap uni-flex uni-row">
						<view class="flex-item input-wrap">
							<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="searchFn()" :placeholder="$lang('apply.chooseACountry')" />
							<text class="iconfont iconsousuo1" @click.stop="searchFn()"></text>
						</view>
					</view>
				</view>
				<view class="country-ul">
					<view class="country-li" v-for="(obj,l) in countryAry" :key="l" @click.stop="selectFn(obj,l)">
						<view class="li-name">
							<text >{{obj.name}} <text class="h6">+{{obj.tel}}</text></text>
							<image v-show="selectIndex == obj.tel" src="/static/icon/icon_select_01.png" class="sel-icon" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付密码 -->
		<uni-popup ref="surePopup" type="center" :maskClick="false">
			<view class="tran-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title">{{$lang('apply.paymentPassword')}}</view>
					<view></view>
				</view>
				<view class="popup-pas">
					<input type="password" v-model="pay_password" placeholder-style="color: #BBC0CB;" :placeholder="$lang('apply.ipassword')" />
				</view>
				<view class="popup-footer">
					<view class="btn" @click.stop="closeFn()">{{$lang('apply.return')}}</view>
					<view class="btn btn-act" @click="sureDraw()">{{$lang('apply.confirm')}}</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			filterArr: [],
			filterAry: [],
			filIndex: 0,
			unionObj: {},
			countryAry: [],
			selectIndex: '',
			selectObj: {},
			showType: 1, // 1==区号  2==代理国家
			countryObj:{
				tel: '86'
			},
			formObj: {
				aagent_level: '', // 代理等级id
				aagent_company: '', // 代理国家
				aagent_mobile_code: '86',  // 手机区号
				aagent_mobile: '', // 手机号
				aagent_email: '',  // 邮箱
			},
			pay_password: '',
			disabled: true,
			itemIndex: 0,
			keyword: '',
			copyCountry: [],
		};
	},
	onLoad() {
		
		this.getCountry();
		this.getLevel();
	},
	components: {
		uniPopup,
		headerBack
	},
	onShow() {

	},
	methods: {
		searchFn(){
			let keyword = this.keyword.trim();
			if(!keyword){
				this.countryAry = this.copyCountry;
			}
			this.countryAry = this.copyCountry.filter(v=>{
				if(v.name.includes(keyword) ){
					return v;
				} 
			})
		},
		closeFn(){
			this.pay_password = '';
			this.$refs.surePopup.close();
		},
		setItem(obj,type){
			this.itemIndex = type;
			this.filterAry = obj.list;
			this.unionObj = this.filterAry[0];
			this.filIndex = this.unionObj.id;
			this.formObj.aagent_level = this.unionObj.id;
		},
		// 处理状态
		handleState(){
			this.disabled = !Object.values(this.formObj).every(v=> v)
		},
		// 获取代理等级
		getLevel(){
			this.$api.sendRequest({
				url: '/api/abonus/level',
				method: 'get',
				success: res=>{
					if(res.code == 0){
						this.filterArr = res.data;
						this.filterAry = this.filterArr[this.itemIndex].list;
						this.unionObj = this.filterAry[0];
						this.filIndex = this.unionObj.id;
						this.formObj.aagent_level = this.unionObj.id;
					}
				}
			})
		},
		// 打开弹框
		openPopup(type,tel){
			this.showType = type
			this.selectIndex = tel;
			this.$refs.countryPopup.open();
		},
		// 获取区号
		getCountry(){
			this.$api.sendRequest({
				url: '/api/register/countrylist',
				method: 'get',
				success:res=>{
					if(res.code == 0){
						this.copyCountry = this.countryAry = res.data;
						this.selectObj = this.countryAry.find(v=> v.tel == '86')
						this.formObj.aagent_company = this.selectObj.name;
					}
				}
			})
		},
		// 选择合伙人
		getTime(obj,index){
			this.unionObj = obj;
			this.filIndex = obj.id;
			this.formObj.aagent_level = obj.id;
			this.$refs.unionPopup.close()
		},
		// 选择国家
		selectFn(obj,index){
			this.selectObj = obj;
			this.formObj.aagent_mobile_code = obj.tel;
			this.formObj.aagent_company = obj.name;
			// if(this.showType == 1){
			// }else if(this.showType ==2) {
				
			// }
			this.selectIndex = obj.tel;
			this.$refs.countryPopup.close();
		},
		// 提交代理
		submitFn(){
			if(this.disabled) return;
			if(!this.formObj.aagent_email.includes('@')){
				return this.$util.showToast({title: this.$lang('apply.choosingAPartner')})
			}
			this.$refs.surePopup.open();
		},
		sureDraw(){
			if(!this.pay_password){
				return this.$util.showToast({title: this.$lang('apply.icemail')})
			}
			this.formObj.pay_password = this.pay_password;
			uni.showLoading({
				title: 'Loading...',
				mask: true
			})
			this.$api.sendRequest({
				url: '/api/abonus/apply',
				data: this.formObj,
				method: 'post',
				success: res=>{
					uni.hideLoading()
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('apply.successfulApplication')})
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/member/index/index'
							})
						},1500)
					}else {
						this.$util.showToast({title: res.message})
					}
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.apply-form {
		width: 100%;
		.no-margin {
			width: 100%;
			height: 20rpx;
			background: #F8F7FC;
		}
		.apply-row {
			padding: 50rpx 32rpx 0px;
			box-sizing: border-box;
			// padding-top: 50rpx;
			.h6 {
				font-size: 24rpx;
				color: #92969E;
				line-height: 34rpx;
				margin-bottom: 34rpx;
			}
			.apply-item {
				display: flex;
				align-items: center;
				margin-bottom: 52rpx;
				.item {
					width: 130rpx;
					padding: 10rpx 0px;
					text-align: center;
					font-size: 26rpx;
					font-weight: 600;
					color: #92969E;
					line-height: 36rpx;
					border: 2rpx solid #92969E;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 46rpx;
				}
				.act {
					color: #31bb6d;
					border-color: #31bb6d;
				}
			}
			.row-in {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #E8EDF5;
				.code-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #292929;
				}
				.code {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					input {
						font-size: 32rpx;
						// font-weight: 600;
						color: #292929;
					}
					.down-icon {
						width: 24rpx;
						height: 24rpx;
						display: block;
						margin-left: 10rpx;
					}
				}
			}
			.row-in-border {
				border: none;
			}
			
			.row-arrow {
				justify-content: space-between;
				.arrow-r {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	
	.content-footer {
		width: 100%;
		padding: 0px 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 74rpx;
		left: 0px;
		.btn {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #CCD0D8;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.btn-act {
			background: #31bb6d;
		}
		.footer-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 28rpx;
			.h6 {
				font-size: 32rpx;
				color: #292929;
			}
			.h8 {
				font-size: 32rpx;
				font-weight: 600;
				color: #31bb6d;
			}
		}
	}
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
			.right {
				width: 40rpx;
			}
		}
		
		.popup-ul {
			width: 100%;
			.popup-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102upx;
				border-bottom: 2upx solid #E8EDF5;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				.radio-icon {
					width: 36upx;
					height: 36upx;
				}
			}
			.popup-li:last-child {
				border: none;
			}
		}
		
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 40upx;
		}
		
		.popup-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn {
				width: 260upx;
				height: 88upx;
				border-radius: 16upx;
				background: #CCD0D8;
				font-size: 34upx;
				color:#fff;
				font-family: Helvetica-Bold, Helvetica;
				font-weight: bold;
				@include flexCenter;
			}
			.btn-act {
				background: #31bb6d;
				color: #fff;
			}
		}
	}
	
	.country-popup {
		width: 100%;
		background: #F8F7FC;
		overflow: auto;
		.shops-header-box {
			width: 100%;
			// height: 88rpx;
			background: #fff;
			padding: 0px 32rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;
			.shops-header {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.shops-left {
					display: flex;
					align-items: center;
					.shops-header-title {
						font-size: 36rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #292929;
						line-height: 50rpx;
						margin-left: 6rpx;
					}
				}
				.shops-right {
					display: flex;
					align-items: center;
					.home-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
					.to-home {
						font-size: 26rpx;
						color: #31bb6d;
					}
				}
			}	
			.search-wrap {
				flex: 0.5;
				padding: 30rpx 30rpx;
				font-size: $font-size-tag;
				display: flex;
				align-items: center;
				.input-wrap {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: $color-bg;
					height: 70rpx;
					padding-left: 10rpx;
					border-radius: 70rpx;
					input {
						width: 90%;
						background: $color-bg;
						font-size: $font-size-tag;
						height: 50rpx;
						padding: 10rpx 25rpx 10rpx 40rpx;
						line-height: 50rpx;
						border-radius: 40rpx;
					}
					text {
						font-size: $font-size-toolbar;
						color: $color-tip;
						width: 80rpx;
						text-align: center;
						margin-right: 20rpx;
					}
				}
				
			}
		}
		.country-ul {
			height: 100vh;
			// padding-top: 100rpx;
			overflow: auto;
			.country-li {
				width: 100%;
				background: #fff;
				padding: 0px 32rpx;
				box-sizing: border-box;
				.li-name {
					width: 100%;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #E8EDF5;
					text {
						font-size: 32rpx;
						color: #353535;
						.h6 {
							margin-left: 15rpx;
							color: #92969E;
						}
					}
					.sel-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
	
	
</style>
